<template>
  <div>
  	<div class="index-slider">
  		<index-slider v-if="slides.length > 0" :slides="slides" :inv="slideSpeed" :order-number="orderNumber"></index-slider>
  	</div>

   	<div class="index-container">
      <div class="index-countdown">
        <index-countdown :time-up-href="timeUpHref"></index-countdown>
      </div>
    	<div class="index-section">
    		<index-discount :products="discounts"></index-discount>
    	</div>
      <div class="index-buy">
        <index-buy></index-buy>
      </div>
    	<div class="index-board" v-for="(item, index) in goodsList" :key="index" :class="{'index-board-notop': index === 0}">
    		<index-board :products="item"></index-board>
    	</div>
    </div>
    <v-go-top></v-go-top>
    <v-app></v-app>
    <v-dialog v-if="isCookie">
      <div class="dialog-tip">
        <div class="dialog-title">{{ $t('message.tipCloseCookieFunction') }}</div>
        <div class="dialog-btn-group">
          <button type="button" class="dialog-btn btn-orange" @click="closeDialog">{{$t('message.confirm')}}</button>
          <!--<button type="button" class="dialog-btn btn-white margin-left">{{$t('message.no')}}</button>-->
        </div>
      </div>
    </v-dialog>
  </div>
</template>

<script>
import IndexSlider from '@/components/index/IndexSlider'
import IndexDiscount from '@/components/index/IndexDiscount'
import IndexBoard from '@/components/index/IndexBoard'
import IndexBuy from '@/components/index/IndexBuy'
import IndexCountdown from '@/components/index/IndexCountdown'
import VGoTop from '@/components/base/VGoTop'
import VDialog from '@/components/base/VDialog'
import VApp from '@/components/base/VApp'
import { getCookie, setCookie, delCookie } from '@/util/util'

export default {
  name: 'Index',
  /* metaInfo () {
    return {
      meta: [
        {
          name: 'Keywords',
          content: 'ซื้อโทรศัพท์มือถือขายดี,สินค้าขายดี,ช้อปปิ้งออนไลน์,ซื้อiPhoneขายดี,ขายของออนไลน์, ซื้อของออนไลน์, ราคาถูก,สมาร์ทโฟน, แท็บแล็ต, คอมพิวเตอร์, โน๊ตบุ๊ค, อุปกรณ์เสริมคอม, กล้อง,  แก็ตเจ็ต '
        },
        {
          name: 'Description',
          content: 'ออนไลน์ ผ่อนสินค้าไม่มีค่าบริการ | รวมสินค้าขายดี มีให้เลือกมากมาย โทรศัพท์มือถือ iPhone Samsung Huawei oppo vivo สมาร์ทโฟน, แท็บแล็ต, คอมพิวเตอร์, โน๊ตบุ๊ค, อุปกรณ์เสริมคอม, กล้อง,  แก็ตเจ็ต | Thishop'
        }
      ]
    }
  }, */
  components: {
    IndexSlider,
    IndexDiscount,
    IndexBoard,
    IndexBuy,
    IndexCountdown,
    VGoTop,
    VDialog,
    VApp
  },
  data () {
    return {
      aa: true,
      slideSpeed: 5000,
      slides: [],
      goodsList: [],
      discounts: [],
      orderNumber: {},
      isCookie: false
    }
  },
  computed: {
    lang () {
      switch (window.lang) {
        case 'cn':
          return 1
        case 'thai':
          return 2
        case 'en':
          return 3
      }
    },
    timeDifference () {
      if (this.countdownType === 0) {
        return new Date('Mar 12 2018 00:00:00 GMT+0700') - new Date().getTime()
      } else if (this.countdownType === 2) {
        return new Date('Mar 17 2018 00:00:00 GMT+0700') - new Date().getTime()
      } else {
        return undefined
      }
    },
    timeUpHref () {
      return '/act/whiteday'
    }
  },
  methods: {
    // 获取各个订单总数
    getOrderTotal () {
      this.$ajax.getOrderTotal().then((res) => {
        if (res.code === 200) {
          this.orderNumber = res.data
        } else {
        }
      }).catch((err) => {
        this.$store.commit('alert', {
          switch: true
        })
      })
    },
    testCookie () {
      setCookie('test', 'testCookie')
      let testC = getCookie('test')
      if (testC === null) {
        this.isCookie = true
      } else {
        delCookie('test')
      }
    },
    closeDialog () {
      this.isCookie = false
    }
  },
  created () {
    //    获取今日特惠信息
    this.$ajax.discounts().then((res) => {
      if (res.code === 200) {
        this.discounts = res.data
        // 构造数据传入每日推荐的轮播列表
        let arr = []
        let cache = []
        this.discounts.forEach((item, index) => {
          if ((index + 1) % 4 === 0) {
            cache.push(item)
            arr.push(cache)
            cache = []
          } else {
            cache.push(item)
          }
        })
        this.discounts = arr
      } else if (res.code === 202) {
        this.$store.commit('alert', {
          switch: true
        })
      }
    }).catch((err) => {
      this.$store.commit('alert', {
        switch: true
      })
    })
    // 获取轮播图信息
    this.$ajax.slides().then((res) => {
      if (res.code === 200) {
        this.slides = res.data
      } else {
      }
    })
    //    获取分类商品信息
    this.$ajax.goodsList(this.lang).then((res) => {
      if (res.code === 200) {
        this.goodsList = res.data
        // 提交静态数据
        let arr = [
          { src: require('@/assets/images/index/mobile.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=551' }, // 手机
          { src: require('@/assets/images/index/appliances.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=1005' }, // 家电品
          { src: require('@/assets/images/index/pad.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=664' }, // 手提/平板
          { src: require('@/assets/images/index/mi.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=132' }, // 小米
          { src: require('@/assets/images/index/camera.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=4' }, // 照相机
          { src: require('@/assets/images/index/watch.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=634' }, // 手表
          { src: require('@/assets/images/index/cosmetic.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=184' }, // 化妆品
          { src: require('@/assets/images/index/bag.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=164' }, // 包包
          { src: require('@/assets/images/index/accessories.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=286' }, // 配件
          { src: require('@/assets/images/index/instrument.jpg'), href: 'https://www.thishop.com/detail/product?goodsId=1365' } // 乐器
        ] // 手机、家电品、手提/平板、小米、照相机、手表、化妆品、包包、配件、乐器
        this.goodsList.forEach((item, index) => {
          item.foot_banner = arr[index]
        })
      } else {
        console.log(res.code, res.msg)
      }
    })
  },
  mounted () {
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    this.testCookie()
  },
  // 这个 activated 不要注释
  activated () {
    if (this.$store.state.loginUser.username) {
      this.getOrderTotal()
    }
  }
}
</script>

<style scoped>
.index-slider {
	min-width: 1200px;
	height: 460px;
}

.index-container {
	min-width: 1200px;
	padding-bottom: 100px;
	/* background-color: #f5f5f5; */
  background: #FFF8F5; /* 活动 */
}

.index-section {
  width: 100%;
	padding: 32px 0 20px;
  background-color: #FFF8F5;
}

.index-board {
	width: 1200px;
	margin: 8px auto 18px;
}

.index-board-notop {
  margin-top: 0;
}

.index-buy {
	width: 1200px;
	margin: 20px auto 10px;
}
  /*提示用户没有打开cookie*/
.dialog-tip {
  width: 320px;
  padding: 60px 70px 40px;
  background-color: #fff;
}

.dialog-title {
  font-size: 18px;
  text-align: center;
}

.dialog-btn-group {
  height: 46px;
  margin-top: 30px;
  font-size: 0;
}
.dialog-btn {
  width: 140px;
  height: 46px;
  cursor: pointer;
  margin-left: 90px;
}
</style>
